const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require('webpack')

module.exports = {
	// entry: path.resolve(__dirname,"../","src/main.tsx"),

	entry: {
		chunk: ['react', 'react-dom/client'],
		app: {
			// import 用来指定业务代码的入口
			import: path.resolve(__dirname, '../', 'src/main.tsx'),
			dependOn: 'chunk',
		},
	},

	output: {
		// 出口必须指定决定路径
		// path: path.resolve(__dirname,"dist"),
		filename: 'js/[name].[chunkhash:8].js',
		clean: true,
	},
	resolve: {
		// extensions是webpack的resolve解析配置下的选项，在引入模块时不带文件后缀时，会来
		// 该配置数组里面依次添加后缀查找文件，因为ts不支持引入以 .ts, tsx为后缀的文件，所
		// 以要在extensions中配置，而第三方库里面很多引入js文件没有带后缀，所以也要配置下js
		extensions: ['.js', '.tsx', '.ts'],
		// 设置别名alias,设置别名可以让后续引用的地方减少路径的复杂度
		// 修改tsconfig.json,添加baseUrl和paths
		alias: {
			'@': path.join(__dirname, '../src'),
		},
		// 查找第三方模块只在本项目的node_modules中查找
		// 使用require和import引入模块时如果有准确的相对或者绝对路径,就会去按路径查询,如果引入的模块没有路径,
		// 会优先查询node核心模块,如果没有找到会去当前目录下node_modules中寻找,如果没有找到会查从父级文件夹
		// 查找node_modules,一直查到系统node全局模块。
		// 这样会有两个问题,一个是当前项目没有安装某个依赖,但是上一级目录下node_modules或者全局模块有安装,就也会引入成功,
		// 但是部署到服务器时可能就会找不到造成报错,另一个问题就是一级一级查询比较消耗时间。
		// 可以告诉 webpack搜索目录范围,来规避这两个问题
		modules: [path.resolve(__dirname, '../node_modules')],
	},
	// 插件增强webpack功能
	plugins: [
		new HtmlWebpackPlugin({
			// template: "./public/index.html"
			template: path.resolve(__dirname, '../', 'public/index.html'),
			inject: 'body', // 把打包后的js文件插入到<body>标签里
			title: 'react-antd-admin',
			favicon: path.resolve(__dirname, '../', 'public/favicon.svg'),
		}),
		// new ProgressPlugin({
		//     handler(percentage,message, ...args) {
		//         console.log(percentage)
		//     }
		// })
		new ProgressPlugin(),
		// new ProvidePlugin({
		// 	React: path.resolve(__dirname, '../', 'node_modules/react/index.js'), // 全局
		// }),
	],
	// loader 加载器，在webpack处理某些模块之前，先使用loader进行处理
	module: {
		rules: [
			// 当webpack开始工作时，遇到了以.js结尾的模块，先使用babel-loader进行加载
			// 当loader加载完后，还需要使用一些@babel/* 进行语法转化，转化成ES5代码
			{ test: /\.(js|jsx|ts|tsx)$/, use: 'babel-loader', exclude: /node_modules/ },
			// 使用css-loader加载解析返回内容交给style-loader来处理，然后以操作DOM形式插入到head标签中（内部样式）
			{ test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
			{
				// 匹配图片文件
				test: /\.(png|jpg|jpeg|gif|svg)$/,
				type: 'asset', // type选择asset
				parser: {
					dataUrlCondition: {
						maxSize: 10 * 1024, // 小于10kb转base64位
					},
				},
				generator: {
					filename: 'static/images/[name].[contenthash:8][ext]', // 文件输出目录和命名 加上[contenthash:8]
				},
			},
			{
				// 匹配字体图标文件
				test: /.(woff2?|eot|ttf|otf)$/,
				type: 'asset', // type选择asset
				parser: {
					dataUrlCondition: {
						maxSize: 10 * 1024, // 小于10kb转base64位
					},
				},
				generator: {
					filename: 'static/fonts/[name][ext]', // 文件输出目录和命名
				},
			},
			{
				// 匹配媒体文件
				test: /.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
				type: 'asset', // type选择asset
				parser: {
					dataUrlCondition: {
						maxSize: 10 * 1024, // 小于10kb转base64位
					},
				},
				generator: {
					filename: 'static/media/[name].[contenthash:8][ext]', // 文件输出目录和命名 加上[contenthash:8]
				},
			},
		],
	},
}
